<template>
  <div class="right-sidebar">
    <el-drawer v-model="drawer" size="auto" :with-header="false" :before-close="close_sidebar">
      <!-- 安卓端占位 -->
      <android-seat />
      <el-menu class="right-sidebar-menu" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
        @select="menu_select">
        <el-menu-item v-if="idDouble" index="remove-first">{{ removeFirstTitle }}</el-menu-item>
        <el-menu-item index="bookmark">{{ bookmarkTitle }}</el-menu-item>
        <el-menu-item v-if="idDouble" index="direction">切换阅读方向 ({{ directionTitle }})</el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script lang='ts' setup>
import { watch, ref, computed } from 'vue'
import { useRoute } from "vue-router";
import { config } from "@/store";
import androidSeat from '@/layout/components/android-seat.vue';

const route = useRoute();

const drawer = ref(false)

const props = defineProps(['rightSidebar', 'direction', 'removeFirst']);
const emit = defineEmits(['contextMenu', 'direction', 'removeFirst'])

const removeFirstTitle = computed(() => {
  return props.removeFirst ? '恢复首页' : '移除首页';
});

const bookmarkTitle = computed(() => {
  return config.bookmarkShow ? '移除书签' : '添加书签';
});

const directionTitle = computed(() => {
  return props.direction ? '右 -> 左' : '左 -> 右';
});

const idDouble = computed(() => {
  return route.name === 'double'
});

watch(
  () => config.rightSidebar,
  (val) => {
    drawer.value = val;
  }
)

function close_sidebar() {
  config.rightSidebar = false;
}

function menu_select(key: string) {
  switch (key) {
    case 'direction':
      emit('direction');
      break;
    case 'remove-first':
      emit('removeFirst');
      break;
  }
  close_sidebar();
}

</script>

<style scoped lang='less'>
.right-sidebar-menu {
  width: 32rem;
  max-width: 70vw;
  height: 100%;
  background-color: #545c64;
}
</style>
